<template>
  <div class="Member">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        ><img
          src="//liangcang-material.alicdn.com/prod/upload/09afdf1b98b9470087f896f5a1318104.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
          alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="//liangcang-material.alicdn.com/prod/upload/9cc3d4760c874ee49579052e3f4feea0.png?x-oss-process=image/resize,w_750/format,webp/interlace,1"
          alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="//liangcang-material.alicdn.com/prod/upload/c2fcf5bc4fc7460e8dbcf0abffe6590f.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
          alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="//liangcang-material.alicdn.com/prod/upload/e6bf83fe19344761a89bb4cc4b114286.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
          alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="//liangcang-material.alicdn.com/prod/upload/e6bf83fe19344761a89bb4cc4b114286.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
          alt=""
      /></van-swipe-item>
    </van-swipe>
    <div class="vipProfileContainer">
      <a
        href="//h5.vip.youku.com/account"
        class="userInfo"
        data-spm-anchor-id="a2hww.12960747.vipProfileContaine.1"
        ><img
          class="logo"
          src="https://static.youku.com/lvip/img/avatar/80/12.png"
        /><span class="level">V4</span
        ><span class="vipDesc">优酷VIP会员2022-02-12到期</span></a
      ><a
        href=" https://activity.youku.com/app/ykvip_rax/yk-vip-cashier-plato/pages/index?wh_weex=true&amp;hideNavigatorBar=true&amp;sceneType=fullScreen&amp;h5params=%7B%22pageKey%22%3A%22STANDARDRENDER_YOUKU%22%2C%22tags%22%3A%22h5vipbanner_001_crm%22%7D"
        data-spm="dshow"
        class="btn aplus_exp aplus_click"
        data-aplus-ae="x14_6559dc8b"
        data-spm-anchor-id="a2hww.12960747.vipProfileContaine.dshow"
        data-aplus-clk="x14_7991c6cd"
        >续费</a
      >
    </div>
    <div class="hot">
      <h3>
        <img
          src="https://gw.alicdn.com/tfs/TB1tU1WaHys3KVjSZFnXXXFzpXa-38-34.png"
          alt=""
        />正在热播
      </h3>
      <div class="hot-list">
        <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/14269a986d8443209a4cdac8a135e50b.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">家族💥身世曝光</p>
          <p class="title">贾洛仪拒绝与父亲相认</p>
        </div>
        <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/ab780c477ffc48ddb7d6fde76c781718.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">三生有幸💥更新</p>
          <p class="title">高燃！十一救侯爵被表彰</p>
        </div>
        <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/f5654ea290f749efaf0fbde735adebbe.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">小敏家💔爱情的无奈</p>
          <p class="title">陈卓小敏分手后各自思念</p>
        </div>
        <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/2b8d415ca9fa49eabbb55d467097b4b1.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">飞虎3💥爽看全集</p>
          <p class="title">护妻狂魔为救妻子与罪犯交易</p>
        </div>
      </div>
        <button>换一换</button>
    </div>
     <div class="hot">
      <h3>
        <img
          src="https://gw.alicdn.com/tfs/TB1tU1WaHys3KVjSZFnXXXFzpXa-38-34.png"
          alt=""
        />独家好片
      </h3>
      <div class="hot-list">
        <div class="item">
          <img
          scr="//liangcang-material.alicdn.com/prod/upload/942d430e0d2f40b5af49457722dc1cf0.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">君九龄💥大事不妙</p>
          <p class="title">世子爷为护九龄惨遭抓捕</p>
        </div>
        <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/68ccc42e3d2f4aba9b68899d154329f9.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">星辰大海❤️追到女神</p>
          <p class="title">泪目！简爱李一鸣大婚现场</p>
        </div>
        <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/42e86d65dc34499d8818d9e55f178ee8.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">一见倾心💓甜爽上头</p>
          <p class="title">贾洛仪拒绝与父亲相认</p>
        </div>
        <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/14269a986d8443209a4cdac8a135e50b.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">家族💥身世曝光</p>
          <p class="title">贾洛仪拒绝与父亲相认</p>
        </div>
        <button>换一换</button>

      </div>
    </div>
     <div class="hot">
      <h3>
        <img
          src="https://gw.alicdn.com/tfs/TB1tU1WaHys3KVjSZFnXXXFzpXa-38-34.png"
          alt=""
        />经典好口碑
      </h3>
      <div class="hot-list">
        <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/14269a986d8443209a4cdac8a135e50b.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">家族💥身世曝光</p>
          <p class="title">贾洛仪拒绝与父亲相认</p>
        </div>
        <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/ab780c477ffc48ddb7d6fde76c781718.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">三生有幸💥更新</p>
          <p class="title">高燃！十一救侯爵被表彰</p>
        </div>
        <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/f5654ea290f749efaf0fbde735adebbe.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">小敏家💔爱情的无奈</p>
          <p class="title">陈卓小敏分手后各自思念</p>
        </div>
         <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/42e86d65dc34499d8818d9e55f178ee8.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">一见倾心💓甜爽上头</p>
          <p class="title">贾洛仪拒绝与父亲相认</p>
        </div>
        <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/14269a986d8443209a4cdac8a135e50b.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">家族💥身世曝光</p>
          <p class="title">贾洛仪拒绝与父亲相认</p>
        </div>
        <div class="item">
          <img
            src="//liangcang-material.alicdn.com/prod/upload/2b8d415ca9fa49eabbb55d467097b4b1.jpg?x-oss-process=image/resize,w_750/format,webp/interlace,1"
            alt=""
          />
          <p class="name">飞虎3💥爽看全集</p>
          <p class="title">护妻狂魔为救妻子与罪犯交易</p>
        </div>
      </div>
        <button>换一换</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Member",
};
</script>
<style scoped>
.Member {
  margin-top: 2.2rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  width: 100%;
  height: 3rem;
}

.my-swipe img {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.vipProfileContainer,
a {
  display: flex;
  align-items: center;
  margin: 0.1rem;
  font-size: 0.16rem;
  justify-content: space-between;
}
.logo {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
}
.level {
  background: #ebba73;
  padding: 0.01rem;
  color: #fff;
}
.vipDesc {
  margin-left: 0.3rem;
  color: #ebba73;
}
.btn {
  padding: 0.1rem 0.2rem;
  background-image: linear-gradient(90deg, #fce5aa, #e1b271);
  color: #5b3301;
  border-radius: 0.15rem;
}
.hot h3{
    display: flex;
    align-items: center;
    margin-left:.2rem;
    font-size:.30rem;
    margin-bottom: .3rem;
}
.hot h3 img{
    display:inline-block;
    width:.5rem;
    height:.4rem;
    margin-right:.2rem
}
.hot-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.hot-list .item img{
    display: inline-block;
    width:3rem;
    height:2rem;
}
.item{
    margin-bottom:.3rem;
    font-size:.16rem;
}
.title{
    color:#494949;
    margin-top:.1rem;
}
button{
    width: 80%;
    margin:0 .7rem;
    border:none;
    border-radius: .3rem;
    color:#666;
    margin-bottom:.2rem;
    font-size: .16rem;
    padding:.1rem;
}
</style>
  
